<template>
	<view class="tagController">
		<view style="display: flex;justify-content: space-between; align-items: center;" v-if="isShowAdd">
<!-- 			<uni-combox type="text" v-if="number === 1" clearAble
			 placeholder="请手动输入安全措施" v-model="tagString" style="width: 70%; height: 100px;"class="custom-combox"></uni-combox> -->
			 <uni-easyinput
			   type="textarea"
			   v-if="number === 1"
			   v-model="tagString"
			   placeholder="请手动输入安全措施"
			   class="custom-easyinput"
			   style="width: 70%; height: 100px;"
			 ></uni-easyinput>
			<uni-combox type="text" :candidates="data" placeholder="输入人员名称,多位请用逗号间隔" v-model="tagString" v-else
				style="width: 60%;" clearAble></uni-combox>
			<button style="background-color: deepskyblue;color: #fff; margin-left: 5%;" type="default" size="mini" 
				@tap="createTags">添加</button>
		</view>
		<view class="tagContainer">
			<view class="tagItem" :class="tagBgColor" v-bind:key="index" v-for="(tagText,index) in value">
				<text @tap="tapTag" :data-text="tagText">{{tagText}}</text>
				<text v-if="isShowDelIcon" class="tagDelIcon" @tap="delTag" :data-text="tagText">x</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'robby-tags',
		props: ['enableDel', 'bgColorType', 'value', 'enableAdd', 'data','number'],
		data() {
			return {
				tagString: '',
				isShowDelIcon: this.enableDel || false,
				isShowAdd: this.enableAdd || false
			}
		},
		computed: {
			tagBgColor: function() {
				if (this.bgColorType === null) {
					return 'tagBgDefault'
				} else if (this.bgColorType === 'primary') {
					return 'tagBgPrimary'
				} else if (this.bgColorType === 'success') {
					return 'tagBgSuccess'
				} else if (this.bgColorType === 'warn') {
					return 'tagBgWarning'
				} else if (this.bgColorType === 'error') {
					return 'tagBgError'
				} else {
					return 'tagBgDefault'
				}
			}
		},
		methods: {
			createTags: function() {
				let tempTagArr = []
				if (this.tagString.length > 0) {
					// let newvalue = this.tagString.split(/,|，/)
					let newvalue = this.tagString.split('|')
					for (let i = 0; i < newvalue.length; i++) {
						let newTag = newvalue[i].trim()

						if (newTag !== '' && this.value.indexOf(newTag) < 0) {
							tempTagArr.push(newTag)
						}
					}
				}
				this.tagString = ''
				this.value.splice(this.value.length, 0, ...tempTagArr)
				this.$emit('add', {
					currentTag: tempTagArr,
					allTags: this.value
				})
				this.$emit('input', this.value)
			},
			delTag: function(e) {
				let delTagText = e.currentTarget.dataset.text
				let delTagIndex = this.value.indexOf(delTagText)
				this.value.splice(delTagIndex, 1)
				this.$emit("delete", {
					currentTag: delTagText,
					allTags: this.value
				})
				this.$emit('input', this.value)
			},
			tapTag: function(e) {
				let selTagText = e.currentTarget.dataset.text
				this.$emit("click", selTagText)
			}
		}
	}
</script>

<style>
	.tagController {
		padding: 10upx 0px 0px 0px;
	}

	.tagContainer {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.tagItem {
		padding: 10upx 20upx;
		margin: 10upx;
		border-radius: 40upx;
		color: white;
	}

	.tagBgDefault {
		background-color: #cfcfcf;
		color: black;
	}

	.tagBgPrimary {
		background-color: #15b9ff;
	}

	.tagBgSuccess {
		background-color: #4cd964;
	}

	.tagBgWarning {
		background-color: #f0ad4e;
	}

	.tagBgError {
		background-color: #dd524d;
	}

	.tagDelIcon {
		padding-left: 20upx;
	}

	.tagInput {
		/* padding: 10upx; */
		display: flex;
		align-items: center;
	}
	/* 1. 设置 placeholder 字体大小 */
	::v-deep(.custom-easyinput textarea::placeholder) {
	  font-size: 16px !important;
	  color: #999;
	}
	
	/* 2. 同步放大用户输入文字 */
	::v-deep(.custom-easyinput textarea) {
	  font-size: 16px !important;
	}
</style>